HTML カラー名

現在、すべてのブラウザが以下のカラー名をサポートしています。141のカラー名はHTMLおよびCSSカラー仕様で定義されています（17の標準カラーと124の追加カラー）。以下の表には、すべてのカラーの値（16進数値を含む）が表示されています。

17標準カラー

以下は17の標準カラーのリストです：

Black
Blue
Aqua
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Orange
Purple
Red
White
Silver
Teal
Yellow

すべてのカラー名

以下の表は、HTMLおよびCSSで定義されたすべての141カラー名を示しています。

カラー名	HEX 値	RGB 値
Black	#000000	rgb(0, 0, 0)
White	#FFFFFF	rgb(255, 255, 255)
Red	#FF0000	rgb(255, 0, 0)
Blue	#0000FF	rgb(0, 0, 255)
Green	#008000	rgb(0, 128, 0)

カラー名の使用例

以下の例では、様々なHTMLカラー名を使用してテキストの色を設定しています：

コード例：

<p style="color: Red;">これは赤色のテキストです。</p>
<p style="color: Blue;">これは青色のテキストです。</p>
<p style="color: Green;">これは緑色のテキストです。</p>

実行結果：

HTML カラー名

カラーセレクター

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>カラーセレクター</title>
    <style>
        #colorBox {
            width: 100px;
            height: 100px;
            margin-top: 20px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

<h1>カラーセレクター</h1>

<label for="colorSelect">カラーを選択:</label>
<select id="colorSelect" onchange="updateColor()">
    <option value="Red" style="background-color: red;">Red</option>
    <option value="Green" style="background-color: green;">Green</option>
    <option value="Blue" style="background-color: blue;">Blue</option>
    <option value="Yellow" style="background-color: yellow;">Yellow</option>
    <option value="Black" style="background-color: black; color: white;">Black</option>
    <option value="White" style="background-color: white;">White</option>
    <option value="Gray" style="background-color: gray;">Gray</option>
    <option value="Purple" style="background-color: purple;">Purple</option>
    <option value="Orange" style="background-color: orange;">Orange</option>
</select>

<div id="colorBox"></div>
<p id="colorName">選択された色の名前がここに表示されます。</p>

<script>
    function updateColor() {
        var select = document.getElementById("colorSelect");
        var color = select.value;
        document.getElementById("colorBox").style.backgroundColor = color;
        document.getElementById("colorName").textContent = "選択された色: " + color;
    }
</script>

</body>
</html>

HTML カラー名

17標準カラー

すべてのカラー名

カラー名の使用例

コード例：

実行結果：

カラーセレクター

関連QA

Q1: どのようにしてHTMLで色を設定しますか？

Q2: どのようにして背景色を設定しますか？

Q3: HTMLカラー名は大文字と小文字を区別しますか？